<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>比价搜索</title>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/category.css">
</head>

<body>

    <!-- 头部 -->
    <header>
        <a class="logo" href="javascript:;">
            <img src="./images/header_logo.png" alt="">
        </a>
        <a class="download" href="javascript:;">
            <img src="./images/header_app.png" alt="">
        </a>
    </header>

    <!-- 搜索 -->
    <div class="search">
        <form action="">
            <input type="text" placeholder="请输入你想比价的商品">
            <button>搜索</button>
        </form>
    </div>

    <!-- 分页列表 -->
    <div class="category">
        <div class="pan">
            <!-- 渲染分类标题模板 -->

        </div>
    </div>

    <!-- 底部 -->
    <footer>
        <div class="move">
            <a href="javascript:;">更多优惠信息 >></a>
        </div>
        <div class="ppph">
            <a href="javascript:;">
            品牌排行
            <img src="images/more.png" alt="">
          </a>
        </div>
        <div class="foot-top">
            <a href="javascript:;">登陆</a>
            <a href="javascript:;">注册</a>
            <a href="#"><span class="glyphicon glyphicon-circle-arrow-up"></span>返回顶部</a>
        </div>
        <div class="foot">
            <a href="javascript:;" style="color: red">手机APP下载</a>
            <a href="javascript:;">慢慢买手机版</a>
            <span>--掌上比价平台</span>
            <p><a href="#">m.manmanbuy.com</a></p>
        </div>
    </footer>


</body>

</html>

<script src="./lib/arttemplate/template-web.js"></script>

<!-- 分类标题 -->
<script type="text/html" id="pantep">
    {{each data value index}}
    <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample{{value.titleId}}" aria-expanded="false" aria-controls="collapseExample" data-id="{{value.titleId}}">
         {{value.title}}
            <span class="glyphicon glyphicon-menu-down"></span>
        </a>
    <div class="collapse" id="collapseExample{{value.titleId}}">
        <div class="well">
            <div class="row">
                <!-- 渲染分类列表模板 -->
            </div>
        </div>
    </div>
    {{/each}}
</script>

<!-- 分类列表 -->
<script type="text/html" id="rowtep">
    {{each data as value key}}
    <div class="col-xs-4">
        <a href="./category.html ? categoryid={{value.categoryId}}" data-categoryId="{{value.categoryId}}">{{value.category}}</a>
    </div>
    {{/each}}
</script>
<script src="./lib/jquery/jquery.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/category.js"></script>